<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="/logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="__CSS__/font.css">
    <link rel="stylesheet" href="__CSS__/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="__STATIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__JS__/xadmin.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iview/3.1.5/iview.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/iview/3.1.5/styles/iview.css" rel="stylesheet"/>
</head>
<body>
<div id="app">
    <form class="layui-form" action="" style="margin-top:20px">
        <div class="layui-form-item">
            <label class="layui-form-label">发圈标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题"
                       class="layui-input" value="{$info.title}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">发圈详情</label>
            <div class="layui-input-block">
                <textarea name="detail" lay-verify="required" placeholder="请输入内容"
                          class="layui-textarea">{$info.detail}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">发圈图片(最多6张)</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <my-upload></my-upload>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">发圈开始时间</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <input value="{$info.begin_time|date='Y-m-d',###}" name="begin_time" type="text" class="layui-input"
                           id="time1" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发圈结束时间</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <input value="{$info.end_time|date='Y-m-d',###}" name="end_time" type="text" class="layui-input"
                           id="time2" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">发圈赏金</label>
            <div class="layui-input-block">
                <input value="{$info.gold}" type="number" step='0.01' name="gold" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">发圈排序id</label>
            <div class="layui-input-block">
                <input type="number" name="order_id" lay-verify="required" placeholder="排序id(数值越大，排序越前,默认为0)"
                       autocomplete="off"
                       value="{$info.order_id}"
                       class="layui-input">
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否上架</label>
            <div class="layui-input-block">
                <select name="is_active">
                    <option value="1" {if $info.is_active==1}selected{/if}>上架</option>
                    <option value="2" {if $info.is_active==2}selected{/if}>下架</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">提交</button>
            </div>
        </div>
    </form>
</div>
<template id="myUpload">
    <div>
        <div class="demo-upload-list" v-for="item in uploadList">
            <template v-if="item.status === 'finished'">
                <img :src="item.url">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                </div>
            </template>
            <template v-else>
                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
        </div>
        <Upload
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                action="/crm/circle/uploadImg"
                style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
            </div>
        </Upload>
        <Modal title="View Image" v-model="visible">
            <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    var Global = {};
    Global.img = {$info.imgs};
    Vue.component('my-upload', {
        template: '#myUpload',
        data() {
            return {
                defaultList: {$imgs},
                imgName: '',
                visible: false,
                uploadList: []
            }
        },
        methods: {
            handleView(name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove(file) {
                const tmp = Global.img;
                const arr = [];
                tmp.forEach(function (v) {
                    if (v != file.url) {
                        arr.push(v);
                    }
                });
                Global.img = arr;
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess(res, file) {
                file.url = res.data.src;
                file.name = res.data.src;
                Global.img.push(file.url);
            },
            handleFormatError(file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize(file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload() {
                const check = this.uploadList.length < 6;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多上传6张图片'
                    });
                }
                return check;
            }
        },
        mounted() {
            this.uploadList = this.$refs.upload.fileList;
        }
    });
    var vm = new Vue({}).$mount("#app");

</script>
<style>
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
<script>
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            var upload = data.field;
            upload.img = Global.img;
            $.post('/crm/circle/editAct?id={$info.id}', upload, function (res) {
                layer.alert(res.msg);
            }, 'json');
            return false;
        });
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#time1'
        });
        laydate.render({
            elem: '#time2'
        });

    });

</script>
</body>
</html>